<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
-->
<template>
      <div class="layout row ma-0 align-center justify-space-between">
        <div class="text-box">
          <div class="subheading pb-2">{{title}} </div>
          <span class="grey--text">{{subTitle}} <v-icon small :color="iconColor">{{icon}}</v-icon></span>
        </div>
        <div class="chart">
          <e-chart id="hello"
            :path-option="computeChartOption"
            height="68px"
            width="100%"
          >
          </e-chart>
        </div>
      </div>
</template>

<script>
import EChart from '@/util/echart'

export default {
  components: {
    EChart
  },
  props: {
    title: String,
    subTitle: String,
    icon: String,
    iconColor: {
      type: String,
      default: 'success'
    },
    type: String,
    chartColor: String,
    data: Array
  },
  data () {
    return {
      defaultOption: [
        ['dataset.source', this.data],
        ['xAxis.show', false],
        ['yAxis.show', false],
        ['color', [this.chartColor]]
      ]
    }
  },

  computed: {
    computeChartOption () {
      switch (this.type) {
        case 'bar':
          this.defaultOption.push(['series[0].type', 'bar'])
          break
        case 'area':
          this.defaultOption.push(['series[0].type', 'line'])
          this.defaultOption.push(['series[0].areaStyle', {}])
          break
        default:
          break
      }
      return this.defaultOption
    }
  },

  watch: {
    data (curVal, oldVal) {
      return this.defaultOption
    }
  }
}
</script>

<style scoped>

</style>
